<!DOCTYPE html>
<!--声明Thymeleaf语法-->
<!--【SpringBoot】Thymeleaf融合ajax  https://blog.51cto.com/u_13579643/4233962-->
<!--AJAX SpringBoot 前后端数据交互的项目实现  https://www.jb51.net/article/239214.htm-->
<!--【jQuery/Thymeleaf】在Thymeleaf页面用jQuery的Ajax方法取得后台数据显示在页面上  https://www.cnblogs.com/heyang78/p/15235719.html-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <!--引入样式 在resources/static下-->
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        /*<![CDATA[*/
        // ajax complete success error js打印 console.log
        // https://blog.csdn.net/tanzongbiao/article/details/124168508
        $(function () {
            $("#btn").click(function () {
                console.log("点击按钮")
                // jQuery 防止相同的事件快速重复触发 比如双击
                // https://blog.csdn.net/flower_vip/article/details/58129032
                $(this).attr("disabled", "disabled");
                var data = new FormData($("#addForm")[0]);
                var targetUrl = $("#addForm").attr("action");
                console.log(targetUrl)
                $.ajax({
                    url: targetUrl,
                    type: 'post',
                    cache: false, //上传文件不需缓存
                    async: true,
                    processData: false, //需设置为false。因为data值是FormData对象，不需要对数据做处理
                    contentType: false, //需设置为false。因为是FormData对象，且已经声明了属性enctype="multipart/form-data"
                    dataType: 'json', // 告诉服务器你期待返回的数据类型
                    data: data,
                    success: function (data) {
                        console.log("res: " + data)
                        if (data.code == 1) {
                            // 提交成功
                            console.log("success")
                            var msg = $("#btn");
                            alert(data.msg)
                            // 清空表单
                            $("#addForm")[0].reset();
                        } else {
                            // 提交失败
                            console.log("fail")
                            alert(data.msg)
                            // var msg = $("#btn");
                            // msg.after("<br><br><span style='color:red;'>提示：" + data.msg + "</span>")
                        }
                    },
                    error: function () {
                        alert("请求失败")
                    },
                    complete:function(xhr,status){
                        // 请求完成之后执行，最后执行，无论成功失败都会执行
                        // 让button可以再次被点击
                        $("#btn").removeAttr("disabled");
                    }
                })
            })
        })
        /*]]>*/
    </script>
</head>

<body>

<div id="wrap">
    <div id="top_content">
        <div id="header">
            <div id="rightheader">
                <p th:text="${nowDate}">
                    2009/11/20
                    <br/>
                </p>
            </div>
            <div id="topheader">
                <h1 id="title">
                    <!-- <a href="/indexJQ">主页</a>-->
                    <a href="indexJQ">主页</a>
                </h1>
            </div>
            <div id="navigation">
            </div>
        </div>
        <div id="content">
            <!--thymeleaf js 获取项目路径 contextPath的方法  https://blog.csdn.net/adventurefenying/article/details/85083602-->
            <!--<form id="addForm" th:action="@{${#httpServletRequest.getContextPath()} + '/file/deployZip'}" method="post" enctype="multipart/form-data">-->
            <!--项目名自动拼接上去了-->
            <form id="addForm" th:action="@{/file/deployZip}" method="post" enctype="multipart/form-data">
                <table cellpadding="0" cellspacing="0" border="0"
                       class="form_table">
                    <tr>
                        <td valign="middle" align="right">
                            上传文件:
                        </td>
                        <td valign="middle" align="left">
                            <!-- 只展示zip文件 https://blog.csdn.net/qq_29854831/article/details/81073636-->
                            <input type="file" name="file" accept=".zip">
                        </td>
                    </tr>
                    <tr>
                        <td valign="middle" align="right">
                            解压路径:
                        </td>
                        <td valign="middle" align="left">
                            <!-- Thymeleaf循环显示select标签值 https://blog.csdn.net/weixin_43665676/article/details/123350457-->
                            <select name="path">
                                <option value="">请选择解压路径</option>
                                <option th:each="dict : ${pathList}" th:text="${dict.name}"
                                        th:value="${dict.path}"></option>
                            </select>
                        </td>
                    </tr>
                </table>
                <p>
                    <!--<input type="submit" class="button" value="提交 &raquo;" id="btn"/>-->
                    <input type="button" class="button" value="提交 &raquo;" id="btn"/>
                </p>
            </form>
        </div>
    </div>
    <div id="footer">
        <div id="footer_bg">
            祝您使用愉快！
        </div>
    </div>
</div>

</body>

</html>